<template>
  <div class="search-page">
    <main-nav></main-nav>
    <div class="container">
      <i-row>
        <i-col span="16" offset="4">
          <quick-search :active="true" class="search-wrap" ref="search"></quick-search>
        </i-col>
      </i-row>
    </div>
    <div class="search-result">
      <div class="container">
        <i-spin size="large" fix v-if="searching"></i-spin>

        <i-tabs :value="type" @on-click="tabChanged">
          <i-tab-pane :label="'课程（'+sum.course +'）'" name="Course">
            <div v-if="type == 'Course'">
              <i-row :gutter="20" class="margin-top-15 margin-bottom-10">
                <i-col :md="6" :sm="8" :xs="12" v-for="(item, index) in items" v-bind:key="'search_course_' + index">
                  <course-item :data="item"></course-item>
                </i-col>
              </i-row>
              <i-page v-show="sum.course" :page-size="20" :total="sum.course" style="text-align: center" :current="page" size="small" @on-change="search" show-total show-elevator></i-page>
              <p v-if="!sum.course">暂无相关课程</p>
            </div>
          </i-tab-pane>
          <i-tab-pane :label="'问答（'+sum.question +'）'" name="Post">
            <div v-if="type == 'Post'">
              <post-item :data="item" v-for="(item, index) in items" :key="'search_post_' + index"></post-item>
              <i-page v-show="sum.question" :page-size="20" :total="sum.question" style="text-align: center" :current="page" size="small" @on-change="search" show-total show-elevator></i-page>
              <p v-if="!sum.question">暂无相关问答</p>
            </div>
          </i-tab-pane>
          <i-tab-pane :label="'笔记（'+sum.note +'）'" name="Note">
            <div v-if="type == 'Note'">
              <note-item :data="item" v-for="(item, index) in items" :key="'search_note_' + index"></note-item>
              <i-page v-show="sum.note" :page-size="20" :total="sum.note" style="text-align: center" :current="page" size="small" @on-change="search" show-total show-elevator></i-page>
              <p v-if="!sum.note">暂无相关笔记</p>
            </div>
          </i-tab-pane>
        </i-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapGetters, mapActions } from 'vuex'
import Filters from '../components/filters'
import MainNav from '../components/main-nav'
import QuickSearch from '../components/quick-search'
import CourseItem from '../components/course-item'
import NoteItem from '../components/note-item'
import PostItem from '../components/post-item'
export default {
  data() {
    return {
      keyword: null,
      type: null,
      items: [],
      searching: true,
      tagId: null,
      page: 1,
      sum: {
        course: 0,
        question: 0,
        note: 0
      }
    }
  },
  methods: {
    getSummary() {
      const that = this
      that.searching = true
      this.$http
        .post('/vts/search/commit', {
          keyword: this.keyword
        })
        .then(response => {
          const sum = that.sum
          const res = response.data.sum
          sum.course = res.Course
          sum.question = res.Post
          sum.note = res.Note
        })
    },
    search() {
      const that = this
      that.items = []
      this.$http
        .post('/vts/search/commit', {
          keyword: this.keyword,
          type: this.type,
          tagId: this.tagId
        })
        .then(response => {
          that.items = response.data.items
          that.searching = false
        })
    },
    tabChanged(type) {
      this.type = type
    }
  },
  components: {
    MainNav,
    Filters,
    QuickSearch,
    PostItem,
    CourseItem,
    NoteItem
  },
  computed: {
    total() {
      return this.sum.course + this.sum.question + this.sum.note
    }
  },
  watch: {
    type() {
      this.page = 1
      this.search()
    }
  },
  mounted() {
    let query = this.$refs.search.query
    this.type = query.type = this.$route.params.type
    this.keyword = query.keyword = this.$route.query.keyword
    query.tagId = this.$route.query.tagId
    this.getSummary()
  }
}
</script>

<style lang="less">
.search-page {
  .search-wrap {
    margin: 60px 0;
    .query-input {
      .ivu-input {
        height: 40px !important;
      }
    }
  }
  .search-result {
    min-height: 400px;
    background: white;
    margin-bottom: -20px;
    position: relative;
    .ivu-tabs-tabpane {
      padding: 0px 5px;
    }
  }
}
</style>
